<template>
	<view class="center_container">
		<view class="title_box">
			<view class="avator">
				<u-image width="100rpx" height="100rpx" shape="circle" :src="avatorSrc"></u-image>
			</view>
			<view class="name"><text>电商11701班-薛丹</text></view>
			<view class="discribes">
				<view class="discribe">
					<view>500小时</view>
					<view>8名</view>
					<view>9小时</view>
				</view>
				<view class="discribe mm">
					<view>学习总时长</view>
					<view>排名</view>
					<view>日最高学习时长</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list_item" @click="goJifen">
				<view class="list_item_left">
					<u-icon size="50" name="../../static/center/jifen.png"></u-icon>
					<text>我的积分</text>
				</view>
				<view class="list_item_right">
					<u-icon size="50" :name="next"></u-icon>
				</view>
			</view>
			<view class="list_item">
				<view class="list_item_left">
					<u-icon size="50" name="../../static/center/message.png"></u-icon>
					<text>信息中心</text>
				</view>
				<view class="list_item_right">
					<u-icon size="50" :name="next"></u-icon>
				</view>
			</view>
			<view class="list_item" @click="goGuize">
				<view class="list_item_left">
					<u-icon size="50" name="../../static/center/rule.png"></u-icon>
					<text>使用规则</text>
				</view>
				<view class="list_item_right">
					<u-icon size="50" :name="next"></u-icon>
				</view>
			</view>
			<view class="list_item" @click="goShezhi">
				<view class="list_item_left">
					<u-icon size="50" name="../../static/center/Ushezhi.png"></u-icon>
					<text>个人设置</text>
				</view>
				<view class="list_item_right">
					<u-icon size="50" :name="next"></u-icon>
				</view>
			</view>
			<view class="list_item" @click="goJiebang">
				<view class="list_item_left">
					<u-icon size="50" name="../../static/center/jiesuo.png"></u-icon>
					<text>解除绑定</text>
				</view>
				<view class="list_item_right">
					<u-icon size="50" :name="next"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatorSrc: '../../static/001.jpg',
				next: '../../static/center/next.png'
			};
		},
		methods: {
			goGuize() {
				uni.switchTab({
					url:"/pages/rule/rule"
				})
			},
			goJifen() {
				uni.navigateTo({
				    url: '/pages/center/wodejifen/wodejifen'
				});

			},
			goShezhi() {
				uni.navigateTo({
				    url: '/pages/center/gerenshezhi/gerenshezhi'
				});
				
			},
			goJiebang() {
				uni.navigateTo({
					url:"jiebang/jiebang"
				})
			}
		}
		
		
			
		
		
	}
</script>

<style lang="scss">
	.center_container {
		height: 100%;
		width: 100%;
		background-color: #f8f8f8;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;

		.title_box {
			height: 400rpx;
			width: 100%;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			margin-bottom: 20rpx;
			
			.name {
				font-size: 35rpx;
			}
			
			
			.discribes {
				// height: 100%;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.discribe {
					display: flex;
					width: 100%;
				
					view {
						flex: 1;
						display: flex;
						justify-content: center;
					}
				}
			}
		}
		.list {
			width: 100%;
			background-color: #f8f8f8;
			
			.list_item {
				background-color: #FFFFFF;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				padding: 0 20rpx;
				
				.list_item_left {
					height: 100rpx;
					display: flex;
					align-items: center;
					font-size: 35rpx;
					
					.u-icon {
						margin-right: 30rpx;
					}
				}
			}
		}
	}
	
	
	// 
	.mm {
		font-size: 15rpx;
		color: grey;
	}
</style>
